<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>word</title>
  <link rel="stylesheet" href="js/layui/css/layui.css">
  <style>
    .tool-bar {
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .export {
      display: none;
      height: 600px;
      overflow-y: auto;
      margin: 50px auto;
      width: 1200px;
      border: 1px solid #ccc;
    }

    i {
      font-style: normal;
    }

    .flex {
      display: flex;
    }

    .box {
      width: 1200px;
      margin: 50px auto;
    }

    #result {
      flex: 1;
    }

    #result_num {
      text-align: center;
      min-width: 100px;
    }

    .past_area {
      width: 1200px;
      margin: 20px auto;
    }

    .past_area textarea {
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
    }
  </style>
</head>

<body>
  <div class="past_area">
    <p>转换后的项目数量统计数据粘贴到下方（默认自动获取剪切板）</p>
    <textarea name="" id="text_area" cols="30" rows="10"></textarea>
  </div>
  <div class="tool-bar">
    <div class="layui-btn layui-btn-normal" id="btn">生成</div>
  </div>

  <div class="export">
    <h1>一、项目开发总体情况</h1>
    <h4 class="kfz">开发中项目<span>--</span>个：</h4>
    <div id="list">
      <!-- <p></p> -->
    </div>
    <h1>本周开发任务完成情况</h1>
    <div id="list2">
      <!-- <p><span class="name">-</span> ：接收技术经理任务<i>-</i>个，需要本周完成任务<i>-</i>个。分解后任务<i>-</i>个，完成<i>-</i>个，剩余0个。</p> -->
    </div>
  </div>

  <script src="js/jquery-1.8.3.min.js"></script>
  <script src="js/layer/layer.js"></script>
  <script src="js/layui/layui.js"></script>
  <!-- <script src="data.js"></script> -->
  <script>
    function c1(data) {
      let list = '';
      let idx = 1;
      data.map(function (d) {
        list += `<p>${idx}、${d.name}</p>`;
        idx++;
      });
      $('#list').empty().append(list);
      $('.kfz span').text(data.length);

    };

    function c2(data) {
      let list = '';
      let idx = 1;
      data.map(function (d) {
        list +=
          `<p>${idx}、<span class="name">${d.name}</span> ：接收技术经理任务<i>${d.value}</i>个，需要本周完成任务<i>${d.value}</i>个。分解后任务<i>${d.value}</i>个，完成<i>${d.value}</i>个，剩余0个。</p>`;
        idx++;
      });
      $('#list2').empty().append(list);
    }

    $('#btn').click(function () {
      //加载层-风格2
      layer.load(1);
      //此处演示关闭
      setTimeout(function () {
        layer.closeAll('loading');
        let week_data = parseJSONSafely($('#text_area').val());
        if (!week_data) return false
        c1(week_data);
        c2(week_data);
        $('.export').fadeIn()
      }, 1000);

    });

    function parseJSONSafely(str) {
      try {
        return JSON.parse(str);
      } catch (e) {
        layer.msg('json格式错误')
        console.err(e);
        //返回默认对象，或根据用例返回null。
        return {}
      }
    }

    //获取剪切板
    navigator.clipboard
      .readText()
      .then((v) => {
        // console.log("获取剪贴板成功：", v);
        $('#text_area').val(v)
      })
      .catch((v) => {
        console.log("获取剪贴板失败: ", v);
      })
  </script>
</body>

</html>